@import 'src/style/variable';

.heading {
  font-size: 28px;
  font-weight: bold;
  margin-top: 10px;

  @media (min-width: $small) {
    font-size: 32px;
    margin-top: 20px;
  }
}

.amount {
  font-size: 16px;
  font-weight: bold;
}

.infoBlock {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;

  @media (min-width: $xsmall) {
    grid-template-columns: 1fr 1fr;
  }

  .item {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .label {
    font-size: 16px;
    color: var(--label);
  }

  .value {
    font-size: 16px;
  }
}

.detailBlock {
  display: flex;
  flex-direction: column;

  .item {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .label {
    font-size: 16px;
    line-height: 21px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: var(--label);

    @media (min-width: $xsmall) {
      justify-content: flex-start;
    }

    > img {
      cursor: pointer;
    }
  }

  .value {
    font-size: 14px;
  }
}

.copyIcon {
  margin-left: 10px;
}

.divider {
  height: 1px;
  background-color: var(--divider);
  margin-top: 10px;
  margin-bottom: 10px;
}
